﻿Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.layout.container.Border'
    ]);

Ext.onReady(function () {

    var tb = Ext.create('Ext.Toolbar', {
        xtype: 'toolbar',
        items: [{
            text: 'Criar usuário',
            iconCls: 'iconAdd',
            handler: function () {
                openWindow('User/Create', 300, 400, 'Criando usuário');
            }
        },
                {
                    text: 'Relatórios',
                    menu:{
                        xtype: 'menu',
                        items: [
                        {
                          text: 'Listagem geral',
                          iconCls: 'reportView',
                          handler: function(){
                            window.location = "User/Report?Report=ShowAll&ReturnType=AsPDF"    
                          },
                          loadMask: {msg:'Carregando...'}
                        }
                        ]
                    },
                    iconCls: 'reportView',
                }                
            ]
    });

    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
	           { name: 'Id', type: 'int' },
	           { name: 'Name', type: 'string' },
               { name: 'BusinessName', type: 'string' },
               { name: 'SectorName', type: 'string' },
	        ],
        idProperty: 'Id'
    });


    var dsCall = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'User',
        storeId: 'Id',
        proxy: {
            type: 'rest',
            url: '../User/GetAll',
            reader: {
                type: 'json',
                root: 'Users'
            },
            writer: {
                type: 'json'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        store: dsCall,
        stateful: true,
        collapsible: true,
        multiSelect: true,
        stateId: 'stateGrid',
        fit: true,
        columns: [
            {
                text: 'Código',
                flex: 0,
                sortable: true,
                width: 80,
                dataIndex: 'Id'
            },
            {
                text: 'Nome',
                sortable: true,
                width: 400,
                dataIndex: 'Name'
            },
            {
                text: 'Empresa',
                sortable: true,
                dataIndex: 'BusinessName'
            },
            {
                text: 'Setor',
                sortable: true,
                dataIndex: 'SectorName'
            },
            {
                text: 'Editar',
                width: 60,
                renderer: function (val) { return '<input id="edit-btn" type="image" src="../../Content/Themes/Aliasis/edit.gif" value="Pré-Visualizar" onClick="openWindow(\'User/Edit/' + val + '\', 300, 400, \'Editando usuário\');"/>'; },
                align: 'center',
                dataIndex: 'Id'
            },
            {
                text: 'Excluir',
                width: 60,
                renderer: function (val) { return '<input id="show-btn" type="image" src="../../Content/Themes/Aliasis/delete.gif" value="Pré-Visualizar" onClick="deleteUserWindow(' + val + ');"/>'; },
                align: 'center',
                dataIndex: 'Id'
            }
        ],
        height: 350,
        width: "100%",
        title: 'Usuários',
        renderTo: 'grid-users',
        dockedItems: tb,
        viewConfig: {
            stripeRows: true,
            enableTextSelection: true
        }
    });

});